    @using Krystalware.SlickUpload;
@using Krystalware.SlickUpload.Web;
@using Krystalware.SlickUpload.Web.Mvc;

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Custom FileName";
}


@section head
            {
    <script type="text/javascript">
        
        function startUpload()
        {
            var slickUpload = kw("slickUpload");

            if (slickUpload)
                slickUpload.start();
        }
        
        
        function cancelUpload()
        {
            kw("slickUpload").cancel();

            document.getElementById("cancelButton").style.display = "none";
        }

        
        function onFileSelectionChanged(data)
        {
            document.getElementById("uploadButton").className = "button" + (kw("slickUpload").get_Files().length > 0 ? "" : " disabled");
        }
        

        function onSessionStarted(data)
        {
            
    kw("slickUpload").set_Data("fileRoot", document.getElementById("fileCategory").value);

            document.getElementById("uploadButton").style.display = "none";

            document.getElementById("cancelButton").style.display = "block";
        }
        
        function onBeforeSessionEnd(data)
        {
            document.getElementById("uploadButton").style.display = "none";
            document.getElementById("cancelButton").style.display = "none";
        }
        

        
    </script>
            }


    @using (Html.BeginForm("UploadResult", "CustomFileName", FormMethod.Post, new { id = "uploadForm", enctype = "multipart/form-data" })) {
        
        <div id="uploadPanel">
            
            <table class="settings">
                <tbody>
                    <tr>
                        <th style="font-weight:bold;border-bottom:solid 1px #ccc">File category</th>
                    </tr>
                    <tr>
                        <td>
                            <select id="fileCategory">
                                <option value="documents">Documents</option>
                                <option value="images">Images</option>
                                <option value="audio">Audio</option>
                                <option value="video">Video</option>
                            </select>
                        </td>
                    </tr>
                </tbody>
            </table>
            <p>The category selected above will be passed to the server with the upload (as a cookie), and used to specify the folder in which the upload files are stored.</p>

            <table class="settings">
                <tbody>
                    <tr>
                        <th style="font-weight:bold;border-bottom:solid 1px #ccc">Select files to upload</th>
                    </tr>
                    <tr>
                        <td>
                            

                            @Html.KrystalwareRazor(new SlickUpload() { 
Id = "slickUpload",
OnClientUploadSessionStarted = "onSessionStarted",
OnClientBeforeSessionEnd = "onBeforeSessionEnd",
OnClientFileAdded = "onFileSelectionChanged",
OnClientFileRemoved = "onFileSelectionChanged",
SelectorTemplate = new Template(@<text>
                               
                                    <a class="button">
                                        <span><b class="icon add"></b> Add files</span>
                                    </a>
                                    
</text>),
ShowDropZoneOnDocumentDragOver = true,
HtmlAttributes = new { @class = "simple", Style = "overflow:hidden;zoom:1"},
FileSelectorHtmlAttributes = new { Style = "float:left"},
FileListHtmlAttributes = new { Style = "clear:both"},
UploadProgressDisplayHtmlAttributes = new { Style = "clear:both"},
UploadProfile = "customFileName",
AutoUploadOnSubmit = true,
UploadFormId = "uploadForm",
SelectorFolderTemplate = new Template(@<text>
                               
                                    <a class="button">
                                        <span><b class="icon add-folder"></b> Add folder</span>
                                    </a>
                                    
</text>),
SelectorDropZoneTemplate = new Template(@<text>
                               
                                    <div>Drag and drop files here.</div>                
                                    
</text>),
FileItemTemplate = new Template(@<text>
                               
                                    <div class="filedata">
                                        @Html.KrystalwareRazor(new FileListElement() { Element = FileListElementType.FileName } )
                                        &ndash;
                                        @Html.KrystalwareRazor(new FileListElement() { Element = FileListElementType.FileSize, Template = new Template("(calculating)") } )
                                    </div>
                                        @Html.KrystalwareRazor(new FileListRemoveCommand() { HtmlAttributes = new { href = "javascript:;"}, Template = new Template("[x]") } )
                                        @Html.KrystalwareRazor(new FileListElement() { Element = FileListElementType.ValidationMessage, HtmlAttributes = new { style = "color:#f00"} } )
                                    
</text>),
ProgressTemplate = new Template(@<text>
                               
                                        <div id="duringUpload">
                                            <div>
                                                Uploading @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.FileCount } ) file(s),
                                                @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.ContentLengthText, Template = new Template("(calculating)") } ).
                                            </div>
                                            <div>
                                                Currently uploading: @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.CurrentFileName } )
                                                file @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.CurrentFileIndex } )
                                                of @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.FileCount } ).
                                            </div>
                                            <div>
                                                Speed: @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.SpeedText, Template = new Template("(calculating)") } )
                                            </div>
                                            <div>
                                                @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.TimeRemainingText, Template = new Template("(calculating)") } )
                                            </div>
                                            <div class="progressBarContainer">
                                                @Html.KrystalwareRazor(new UploadProgressBar())
                                                <div class="progressBarText">
                                                    @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.PercentCompleteText, Template = new Template("(calculating)") } )
                                                </div>
                                            </div>
                                        </div>
                                    
</text>)
 } )
@Html.KrystalwareRazor(new KrystalwareScriptRenderer())                            
                        </td>
                    </tr>
                </tbody>
            </table>
            <p>
                        <a id="uploadButton" href="javascript:;" onclick="startUpload()" class="button disabled" >
 <span><b class="icon upload"></b> Upload Files</span>        </a>

                <a id="cancelButton" href="javascript:;" onclick="cancelUpload()" style="display:none" class="button">
                    <span><b class="icon cancel"></b> Cancel</span>
                </a>
                <div style="clear:both"></div>
            </p>
        </div>
    }
    




@section description
            {
    Demonstrates how to pass information to the server and generate server filenames for files as they are uploaded.
            }
